<template>
  <view class="id-query-container">

    <!-- 查询表单 -->
    <view class="query-form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input type="text" placeholder="请输入姓名" v-model="queryForm.name" />
      </view>

      <view class="form-item">
        <text class="label">身份证号</text>
        <input type="text" placeholder="请输入身份证号" v-model="queryForm.idNumber" />
      </view>

      <view class="form-item">
        <text class="label">体检日期</text>
        <picker mode="date" :value="queryForm.examDate" @change="onDateChange">
          <view class="picker-content">
            <text :class="queryForm.examDate ? 'picker-text' : 'picker-placeholder'">
              {{queryForm.examDate || '请选择体检日期'}}
            </text>
          </view>
        </picker>
      </view>

      <!-- 查询按钮 -->
      <button class="query-btn" @click="handleQuery">查询</button>

      <!-- 注意事项 -->
      <view class="notice">
        <text class="notice-title">注:</text>
        <view class="notice-item">1、本功能可查询他人健康证,查询时姓名及证件号码必填写真实一致;</view>
        <view class="notice-item">2、使用健康证号绑定,则只能查看当前的电子证号.</view>
      </view>

      <!-- 通知公告 -->
      <!-- <view class="announcement">
        <text class="announcement-text">
          通知：原《广东省食品从业人员健康检查的管理办法》已于2024年11月到期失效。市场监管系统不再对食品从业人员健康证明实施信息化管理。从即日起，省市场监管局将关闭"全省食品从业人员健康证明信息化管理系统"，不再对医疗机构出具的健康证明信息进行收集。医疗机构可按照《通知》和相关法律法规，对申办(领)健康证明的人员严格按法律法规要求完成相关疾病检查(验)后，按《医疗机构管理条例》第二十六条和三十一条出具相关健康证明(文件)。
        </text>
      </view> -->

      <!-- 查看相关通知链接 -->
      <!-- <view class="view-notice">
        <text>查看相关通知</text>
        <text class="iconfont icon-right"></text>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      queryForm: {
        name: '',
        idNumber: '',
        examDate: ''
      }
    }
  },
  methods: {
    handleQuery() {
      // 处理查询逻辑
      if (!this.queryForm.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.queryForm.idNumber) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        })
        return
      }

      // 跳转到index页面，并传递查询参数
      uni.navigateTo({
        url: `/pages/index?name=${this.queryForm.name}&idNumber=${this.queryForm.idNumber}&examDate=${this.queryForm.examDate}`
      })
    },
    onDateChange(e) {
      this.queryForm.examDate = e.detail.value
    }
  }
}
</script>

<style lang="scss" scoped>
.id-query-container {
  background-color: #fff;
  min-height: 100vh;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;

    .title {
      font-size: 18px;
      font-weight: 500;
    }
  }

  .query-form {
    padding: 20px;

    .form-item {
      margin-bottom: 20px;

      .label {
        display: block;
        margin-bottom: 10px;
        font-size: 16px;
      }

      input {
        width: 100%;
        height: 44px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        color: #333;
        padding: 0 10px;
      }

      .picker-content {
        width: 100%;
        height: 44px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        padding: 0 10px;
      }

      .picker-placeholder {
        color: #999;
        font-size: 14px;
      }

      .picker-text {
        color: #333;
        font-size: 14px;
      }
    }

    .query-btn {
      width: 100%;
      height: 44px;
      background-color: #409EFF;
      color: #fff;
      border-radius: 4px;
      margin: 30px 0;
      line-height: 44px;
      font-size: 16px;
    }

    .notice {
      color: #666;
      font-size: 14px;
      margin: 20px 0;

      .notice-item {
        margin-top: 5px;
        line-height: 1.5;
      }
    }

    .announcement {
      background-color: #f8f8f8;
      padding: 15px;
      margin: 20px 0;
      font-size: 14px;
      color: #f56c6c;
      line-height: 1.6;
    }

    .view-notice {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-top: 1px solid #eee;
      color: #333;
      font-size: 14px;
    }
  }
}
</style>
